<template>
  <div class="Home minScrollBarStyle">
    <getScroll></getScroll>
    <div class="main">
      <div class="texts">旅行住宿，就上最美乡村住宿预订平台</div>
      <div class="bar">
        <img src="@/assets/images/index_bar.jpg" alt="" />
      </div>
      <div class="content">
        <h2 style="font-weight: 600; margin-bottom: 20px">住宿服务升级</h2>
        <div class="service">
          <div class="service-item">
            <img src="@/assets/images/service1.png" alt="" />
            <div class="text">
              <span>知名住宿，客房充足，选择多多</span>
            </div>
          </div>
          <div class="service-item">
            <img src="@/assets/images/service2.png" alt="" />
            <div class="text">
              <span>专业服务，房间干净，放心入住</span>
            </div>
          </div>
          <div class="service-item">
            <img src="@/assets/images/service3.png" alt="" />
            <div class="text">
              <span>安全便捷，服务保障，用心生活</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="video"> -->
      <!-- 背景视频区域 -->
      <!-- <video-bgc-container v-bind="videoBgcInfo"> </video-bgc-container> -->
      <!-- <video-container></video-container> -->
      <!-- </div> -->
      <div class="hotel">
        <h2 style="font-weight: 600; text-align: center; margin-bottom: 20px">平台优质住宿推荐</h2>
        <h3 style="color: gray; text-align: center">一种情怀，一种住宿</h3>
        <div class="hotels">
          <template v-if="accommodationsByHot && accommodationsByHot.accommodationTotal">
            <div
              class="hotels-item"
              v-for="item in accommodationsByHot.accommodationLists"
              :key="item.id"
              @click="selectAccommodation(item)"
            >
              <img :src="item.images[0]" alt="" />
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="price">
                  <div>
                    <span class="f">{{ item.charge }}</span
                    >起
                  </div>
                  <div>
                    <span class="s">{{ item.view_counts }}</span
                    >热度
                  </div>
                </div>
              </div>
            </div>
            <div class="hotels-item" v-show="accommodationsByHot.accommodationTotal % 3 == 2"></div>
          </template>

          <template v-else>
            <div class="hotels-item">
              <img src="../../../assets/images/hanting_hotel.jpg" alt="" />
              <div class="info">
                <div class="name">xxxx</div>
                <div class="price">
                  <div><span class="f">￥180</span>起</div>
                  <div><span class="s">1993</span>点评</div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import getScroll from "@/components/UI-cnps/getScroll/getScroll.vue"
import useRouterJump from "@/hooks/useRouterJump"
import useAccommodationStore from "@/store/main/acccommodation/acccommodation"
import { onMounted, ref } from "vue"
import { storeToRefs } from "pinia"
import { localCache } from "@/utils/cacheData"
const { routerJump } = useRouterJump()

const accommodationStore = useAccommodationStore()
const { accommodationsByHot } = storeToRefs(accommodationStore)

/* 去信息页面 */
function selectAccommodation(item) {
  localCache.setCache("accommodationInfo", item)
  routerJump("push", "AccommodationParticular")
}

onMounted(() => {
  accommodationStore.getAccommodationByHot(5, 0)
})
</script>

<style lang="less" scoped>
.Home {
  // background-color: #171719;
  overflow: hidden;
}

.video-container {
  position: relative;
  overflow: hidden;
  // height: 80vh;
}

.main {
  position: relative;
  .texts {
    z-index: 1000;
    font-weight: bold;
    color: white;
    font-style: italic;
    position: absolute;
    left: 200px;
    top: 150px;
    font-size: 36px;
    user-select: none;
  }
  .bar {
    padding: 0 2px;
    img {
      height: 300px;
      width: 100%;
      border-bottom-left-radius: 40%;
      border-bottom-right-radius: 40%;
      display: block;
    }
  }
  .content {
    width: 60%;
    margin: 30px auto;
    text-align: center;
    .service {
      display: flex;
      justify-content: center;
      &-item {
        flex: 1 1 0%;
        img {
          width: 50px;
          height: 50px;
        }
        .text {
          color: #455873;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
  }
  .hotel {
    margin: 50px auto;
    .hotels {
      margin: auto 0px;
      padding: 10px 100px;
      display: flex;

      flex-wrap: wrap;
      justify-content: space-between;
      // justify-content: center;
      // align-items: center;
      .hotels-item {
        width: 400px;
        height: 350px;
        margin: 20px 20px 28px 20px;
        border-radius: 20px;

        img {
          width: 400px;
          height: 300px;
          border-radius: 20px;
          cursor: pointer;
          margin-bottom: 10px;
          transition: all 0.25s;
          &:hover {
            box-shadow: 5px 5px 5px 5px rgb(69, 88, 115);
          }
        }

        .info {
          width: 400px;
          margin-top: 12px;
          .name {
            font-size: 20px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
          .price {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            .f {
              color: red;
              font-size: 16px;
              margin-right: 10px;
            }
            .s {
              margin-right: 10px;
              font-size: 16px;
              color: rgb(69, 88, 115);
            }
          }
        }
      }
    }
  }
}
</style>
